Ext.define('shop.view.Contact', {
    extend : 'Ext.form.Panel',
    requires : [ 'Ext.field.*', 'Ext.form.*' ],
    config : {
        id : 'basicform',
        title : 'Contact',
        iconCls : 'user',

        styleHtmlContent : true,
        scrollable : true,

        listeners : {
            'initialize' : function(container, newActiveItem, oldActiveItem, eOpts) {
                container.setItems(this.getFormItems());
            }
        }
    },

    /**
     * This method returns an array of all items we should add into the form panel we create above in our launch
     * function. We have created this function to simply make things cleaner and easier to read and understand. You
     * could just put these items inline up above in the form `config`.
     * 
     * @return {Array} items
     */
    getFormItems : function() {
        return [ {
            docked : 'top',
            xtype : 'titlebar',
            title : 'Contact'
        }, {
            xtype : 'fieldset',
            title : 'Personal Info',
            instructions : 'Please enter the information above.',
            defaults : {
                labelAlign : 'left',
                labelWidth : '40%'
            },
            items : [ {
                xtype : 'textfield',
                name : 'name',
                label : 'Name',
                required : true,
                autoCapitalize : false
            }, {
                xtype : 'emailfield',
                name : 'email',
                label : 'Email (optional)',
                placeHolder : 'you@gmail.com'
            }, {
                xtype : 'textareafield',
                required : true,
                name : 'message',
                label : 'Message',
                maxRows : 10
            } ]
        },

        // Create a docked bottom toolbar which will contain buttons to trigger various functions in our formpanel.
        {
            xtype : 'toolbar',
            docked : 'bottom',
            items : [ {
                xtype : 'spacer'
            },
            // Here we add a reset button which will reset all fields within the form panel back to their original value
            {
                text : 'Reset',

                // Ensure the scope is 'this' so we have access to the global 'form' instance
                scope : this,
                handler : function() {
                    // Call the form.reset method
                    Ext.getCmp('basicform').reset();
                }
            },

            // Finally we add a Save button which will mask the formpanel, and update the current record in the formpanel with
            // the latest values from the formpanel.
            {
                text : 'Submit',
                ui : 'confirm',
                scope : this,
                handler : function() {
                    var form = this.form;

                    // Mask the form
                    form.setMasked({
                        xtype : 'loadmask',
                        message : 'Submitting...'
                    });

                    // Put it inside a timeout so it feels like it is going to a server.
                    setTimeout(function() {
                        if (form.user) {
                            // Call the updateRecord method of formpanel with the user record instance. This will update the user record
                            // with the latest values.
                            form.updateRecord(form.user, true);
                        }

                        // Unmask the formpanel
                        form.setMasked(false);
                    }, 1000);
                }
            } ]
        } ];
    }
});
